(function () {
    var fenlei = document.getElementsByClassName('fenlei');
    var nav_none = document.getElementsByClassName('nav-none');
    var shuigt = document.getElementsByClassName('shuigt');
    var navtitle = document.getElementById('nav-title')
    var xianshi = document.getElementsByClassName('xianshi')[0];



    // 商品分类 显示隐藏
    xianshi.style.display = 'none'

    navtitle.onmouseover = function () {
        xianshi.style.display = 'block'
    }
    navtitle.onmouseout = function () {
        xianshi.style.display = 'none'
    }
    xianshi.onmouseover = function () {
        xianshi.style.display = 'block'
    }
    xianshi.onmouseout = function () {
        xianshi.style.display = 'none'
    }

    // 全部商品分类

    nav_none[0].style.display = 'none'

    

    for (let i = 0; i < fenlei.length; i++) {
        shuigt[i].style.backgroundPosition = -i * 24 + 'px' + ' 0px'
        if (i === 0)
        {
        fenlei[i].style.top = '36px'
            
        } else {
        fenlei[i].style.top = i*43+36+'px'    
        }
        

        // 注册水果事件
        fenlei[i].onmouseover = function (e) {
            this.display = 'block'
            fenlei[i].classList.add('mafan')

            for (let j = 0; j < nav_none.length; j++) {
                nav_none[j].style.display = 'none'
            }
            nav_none[i].style.display = 'block'
        }
        fenlei[i].onmouseout = function () {
            nav_none[i].style.display = 'none'
            fenlei[i].classList.remove('mafan')
            return

        }
        nav_none[i].onmouseover = function () {
            this.style.display = 'block'
            fenlei[i].classList.add('mafan')

        }
        nav_none[i].onmouseout = function () {
            this.style.display = 'none'
            fenlei[i].classList.remove('mafan')
            return
        }
    }
    
    // 大小图片
    var shopimg = document.getElementsByClassName('shopimg')[0];
    var xiaoshopimg = document.getElementsByClassName('xiaoshopimg')[0];
    shopimg.children[0].style.display = 'block';
    xiaoshopimg.children[0].style.borderColor =  '#09964e';
    for (let i = 0; i < xiaoshopimg.children.length; i++) {
        xiaoshopimg.children[i].onmouseover = function () {

            for (let j = 0; j < shopimg.children.length; j++) {
                shopimg.children[j].style.display = 'none';
            xiaoshopimg.children[j].style.borderColor =  'transparent';
                
            }
            xiaoshopimg.children[i].style.borderColor =  '#09964e';

            shopimg.children[i].style.display = 'block';
        }
    }

    // 最近浏览
    var laji = document.getElementsByClassName('lajitu');
    var zuonei = document.getElementsByClassName('zuonei');
    var zuilan = document.getElementById('zuilan');
    // 清空按钮
    var qingk = document.getElementById('qingk');
    qingk.onclick = function (e) {
        e.preventDefault();
        // 直接清空
        zuilan.remove();
        
    }
    for (let i = 0; i < laji.length; i++) {
        laji[i].onclick = function (e) {
            e.preventDefault();
            this.parentElement.parentElement.parentElement.remove();
            if (laji.length === 0) {
                // 都清空完 直接删除
                zuilan.remove();
            }
        }
    }


    // 设置商品详情页和用户评论的点击
    // 商品详细描述的title点击 
    var jie_title = document.getElementById('jie-title');
    var jie_shang = document.getElementById('jie-shang')
    var jie_ping = document.getElementById('jie-ping')
    jie_shang.style.display = 'block'
    jie_title.children[0].classList.add('dian-title')

    jie_title.children[0].onclick = function () {
        jie_title.children[1].classList.remove('dian-title')
        jie_shang.style.display = 'block'
        jie_ping.style.display = 'none'
        jie_title.children[0].classList.add('dian-title')
    }

    jie_title.children[1].onclick = function () {
        jie_title.children[0].classList.remove('dian-title')
    jie_shang.style.display = 'none'
    jie_ping.style.display = 'block'
        
        jie_title.children[1].classList.add('dian-title')
    }
    

    // 固定定位 人工和 top
    
    var gudingtop = document.getElementById('gudingtop');

    var guding = document.getElementById('guding')
    guding.onmouseover = function () {
        guding.style.backgroundPosition = '-56px -46px'
    }
    guding.onmouseout = function () {
        guding.style.backgroundPosition = '0 -46px'
    }
    if (document.documentElement.scrollTop > 290) {
        gudingtop.style.display = 'block'
        guding.style.bottom = '60px'
        
    } else {
        gudingtop.style.display = 'none'
        guding.style.bottom = '20px'
    }
    window.onscroll = function () {
        if (document.documentElement.scrollTop > 290) {
            gudingtop.style.display = 'block'
            guding.style.bottom = '60px'
            
        } else {
            gudingtop.style.display = 'none'
            guding.style.bottom = '20px'
        }
    }
    gudingtop.onclick = function(e){
        e.preventDefault();

        let a = document.documentElement.scrollTop;
        let b = 0;
        let s = b - a;
        let sudu = parseInt(s / 600 * 17);
        var timer =null
        timer= setInterval(function () {
                a += sudu;
                if (a < b) {
                    clearInterval(timer);
                }
            document.documentElement.scrollTop = a
        },17)
    }


})()



